<template>
  <div class="userEdit">
    <el-form ref="ruleForm" :model="userForm" label-width="72px">
      <el-form-item label="用户搜索：">
        <el-input v-model="userForm.keyword" placeholder="请输入用户名称，关键字，ID" class="search-select" size="small" clearable>
          <el-button slot="append" class="el-input-group__append-button" icon="el-icon-search" size="small" @click="handleSearch" />
        </el-input>
      </el-form-item>
    </el-form>
    <el-table
      ref="table"
      v-aaa
      v-loading="listLoading"
      :data="tableData"
      class="el-table__header-wrp r-table"
    >
      <el-table-column>
        <template slot-scope="scope">
          <el-radio v-model="radio" @change.native="changeType(scope.row)"></el-radio>
        </template>
      </el-table-column>
      <el-table-column
        prop="id"
        name="ID"
        label="ID"
      />
      <el-table-column
        label="昵称"
        name="nickName"
      >
        <template slot-scope="scope">
          <span class="text_overflow">{{ scope.row.nickName }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="客户头像"
      >
        <template slot-scope="scope">
          <div class="demo-image__preview">
            <div>
              <div class="tabBox_img" v-viewer>
                <img style="width: 36px;height: 36px" v-lazy="$uploadURL(scope.row.headImage)" :alt="$uploadURL(scope.row.headImage)">
              </div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="registerFrom"
        label="用户类型"
      />
      <el-table-column
        prop="gender"
        label="性别"
      >
        <template slot-scope="scope">
          <div>{{ scope.row.gender | genderFilter }}</div>
        </template>
      </el-table-column>
      <el-table-column
        label="地区"
      >
        <template slot-scope="scope">
          <div>{{ scope.row.address }}</div>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="pagination.total > 0"
      class="pagination--dialog"
      :total="pagination.total"
      :page.sync="pagination.currentPage"
      :limit.sync="pagination.limit"
      :page-sizes="[10, 20, 30, 50]"
      @pagination="pageChange"
    />
  </div>
</template>

<script>
import { getUserListApi } from '@/api/user'
import { adjustColumnWidth } from '@/mixins/adjustColumnWidth'
export default {
  name: 'UserAgent',
  filters: {
    genderFilter(key) {
      const gender = {
        0: '男',
        1: '女',
        2: '未知'
      }
      return gender[key]
    }
  },
  mixin: [adjustColumnWidth],
  data() {
    return {
      userForm: {
        keyword: ''
      },
      tableData: [],
      multipleSelection: [],
      pagination: {
        total: 0,
        currentPage: 1,
        limit: 10
      },
      radio: '',
      listLoading: false
    }
  },
  created() {
    this.getUserList()
  },
  mounted() {
    const _this = this;
    window.onresize = function(){
      _this.$forceUpdate()
    }
  },
  methods: {
    pageChange(data) {
      this.pagination.currentPage = data.page
      this.getUserList()
    },
    // 搜索
    handleSearch() {
      this.pagination.currentPage = 1
      this.getUserList()
    },
    // 单选框选中时
    changeType(row) {
      this.$emit('userSelectRow', row)
      this.$emit('close')
    },
    getUserList() {
      this.listLoading = true
      getUserListApi({
        keyword: this.userForm.keyword,
        PageNumber: this.pagination.currentPage,
        PageSize: this.pagination.limit
      }).then((res) => {
        this.listLoading = false
        const data = res.data
        this.tableData = data
        this.pagination.total = res.head ? res.head.totalCount : 0
      }).catch(() => {
        this.listLoading = false
      })
    }
  }
}
</script>

<style lang="scss">
  .el-dialog__wrapper {
    .dialogAgent {
      max-width: 1000px;
      width: 100%;
      min-width: 365px;
    }
  }
  .pagination-container {
    text-align: right !important;
    .el-pagination {
      white-space: normal;
    }
  }

  @media screen and (max-width: 767px) {
    .selWidth {
      width: 100% !important;
    }
  }
</style>

<style>
  .el-table.r-table .cell {
    display: inline-block !important;
    white-space: nowrap !important;
    width: auto !important;
    overflow: auto !important;
  }

  .el-table.r-table .el-table__body-wrapper {
    overflow-x: auto;
  }
</style>
